<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/confirm_order.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
//			var u = navigator.userAgent;
//			var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
//			var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
//			if(isiOS){
//				$(".fake-box input ").css({'margin-left':'-100%','text-indent':'-999em','opacity':'0'})
//			}
		</script>
		<style type="text/css">
			.pwd-box {
				width: 100%;
				height: 40px;
				position: relative;
				border: 1px solid #999999;
				overflow: hidden;
				margin: 10px auto;
			}
			
			.pwd-box input[type="number"] {
				width: 100%;
				height: 100%;
				color: transparent;  
				/*letter-spacing; /*属性增加或减少字符间的空白*/
				letter-spacing: 30px;
				position: absolute;
				top: 0;
				left: 0;
				border: none;
				font-size: 18px;
				opacity: 0;
				z-index: 1;
				outline: none;
			}
			
			.fake-box {
				width: 100%;
				height: 100%;
				display: flex;
				flex-flow: row;
			}
			
			.fake-box input {
				display: inline-block;
				flex: 1;
				width: 100%;
				height: 100%;
				border: none;
				border-right: 1px solid #999999;
				text-align: center;
				font-size: 30px;
				float: left;
				border-radius: 0;
				
			}
			
			.fake-box input:nth-last-child(1) {
				border: none;
			}
			
			.offBtn {
				background: none;
				width: initial;
				display: inline;
				float: left;
				font-size: 24px;
				color: #000000;
				top: -15px;
				width: initial;
				padding: 0;
			}

			
			.mui-popup-inner {
				border-radius: 13px 13px 0px 0px;
				padding: 25px;
			}
			
			.mui-popup-text input {
				padding: 0;
			}
			.mui-content{margin-top: 45px;}
			.mui-table-view-cell p{
				margin-bottom: 12px;
			}
		</style>
	</head>

	<body>
		<div id="headerNav"></div>
		<!--------填写登录内容----------->
		<div class="mui-content">
			<div class=".mui-table" style="background: white;">
				<div class="mui-table-cell mui-col-xs-8">
					<h5 style="padding-top:12px;padding-left: 12px;" class="username"></h5>
					<p class="mui-h5 mui-ellipsis address" style="padding-top:12px;padding-left: 12px;"></p>
				</div>
				<div class="mui-table-cell mui-col-xs-4 mui-text-right">
					<span class="mui-h5 phone" style="padding-right: 12px;"></span>
				</div>
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img class="mui-media-object mui-pull-left goods_img" src="img/icon_liquor.png" style="max-width:92px;height:92px;">
						<div class="mui-media-body">
							<p class='mui-ellipsis goods_name' style="font-size:16px;font-weight:400;color:rgba(51,51,51,1);"></p>
							<p class='mui-ellipsis goods_specific' style="font-size:16px;font-weight:400;color:rgba(51,51,51,1);"></p>
							<p class='mui-ellipsis goods_price' style="font-size:18px;font-weight:bold;color:rgba(87,99,255,1);display: inline-block;float:left;"></p>
							<p style="display: inline-block;float:right" class="nums"></p>
						</div>
					</a>
				</li>
			</ul>
			<div class="mui-table" style="background: white;">
				<div class="mui-table-cell mui-col-xs-7">
					<h5 style="padding-top:12px;padding-left: 12px;">购买数量</h5>
				</div>
				<div class="mui-table-cell mui-col-xs-5 mui-text-right" style="padding-right: 12px;">
					<div class="mui-numbox">
						<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
						<input class="mui-input-numbox" type="number" value="1" id="box" />
						<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					</div>
				</div>
			</div>
			<div class="mui-table" style="background: white;">
				<div class="mui-table-cell mui-col-xs-8">
					<h5 style="padding-top:12px;padding-left: 12px;">商品金额</h5>
				</div>
				<div class="mui-table-cell mui-col-xs-4 mui-text-right">
					<span class="mui-h5 unitCost" style="padding-right: 12px;"></span>
				</div>
			</div>
			<div class="mui-table" style="background: white;">
				<div class="mui-table-cell mui-col-xs-8">
					<h5 style="padding-top:12px;padding-left: 12px;">运费</h5>
				</div>
				<div class="mui-table-cell mui-col-xs-4 mui-text-right">
					<span class="mui-h5" style="padding-right: 12px;">￥0.00</span>
				</div>
			</div>
			<div class="mui-table" style="background: white;">
				<div class="mui-table-cell mui-col-xs-8">
					<h5 style="padding-top:12px;padding-left: 12px;">支付金额：</h5>
				</div>
				<div class="mui-table-cell mui-col-xs-4 mui-text-right">
					<span class="mui-h5 allCost" style="padding-right: 12px;font-size:20px;color:rgba(87,99,255,1);font-weight:bold;"></span>
				</div>
			</div>
		</div>
		<!--------确认登录----------->
		<div class="mui-button-row" style="background:white;margin-top:22px;">
			<button type="button" class="mui-btn mui-btn-primary payBtn" style="width:93%;height:50px;background:#5763FF;position: fixed;left:12px;bottom:12px;" id="btn">立即支付</button>
			<!--<input type="hidden" name="hidenIput" id="hidenIput" value="" class="mui-btn" style="width: 93%;height: 50px;" />-->
		</div>

	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('#headerNav').load('header.html', function() {
			$('header h1').html('确认订单');
		});
	</script>
	<script type="text/javascript">
		

		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return unescape(r[2]);
			return null;
		}
		var checked = GetQueryString("id");
		var a = localStorage.state;
		var b = localStorage.data;
		mui.ready(function() {

		})
		$.ajax({
			type: "post",
			url: "http://mall.itcn99.com/i/index/order_buy",
			async: true,
			dataType: 'jsonp',
			data: {
				"gid": checked,
				"uid": b,
			},
			success: function(data) {
				console.log(data)
				var state = data.state;
				var address_id = data.data.address_info.id;
				console.log(address_id)
				var address = data.data.address_info.address;
				var city = data.data.address_info.city;
				var mobile = data.data.address_info.mobile;
				console.log(mobile)
				var username = data.data.address_info.name;
				$(".address").html('收货地址：' + city + address);
				$(".phone").html(mobile);
				$(".username").html('收货人：' + username);
				var goods_img = data.data.goods_info.goods_img;
				var goods_name = data.data.goods_info.goods_name;
				var goods_price = data.data.goods_info.goods_price;
				var goods_specific = data.data.goods_info.goods_specific;
				$(".goods_img").attr('src', goods_img);
				$(".goods_name").html(goods_name);
				$(".goods_price").html('￥' + goods_price);
				$(".goods_specific").html(goods_specific);

				$('.unitCost').html('￥' + goods_price);
				$('.allCost').html('￥' + goods_price);
				$('.nums').html('x1');
				var c;
				nums();

				function nums() {
					$('.mui-numbox button').click(function() {
						$('.unitCost').html('￥' + goods_price);
						$('.allCost').html('￥' + goods_price);
						c = document.getElementById('box').value;
						$('.nums').html('x' + c);
						$('.allCost').html('￥' + goods_price * c);
						if(c < 1) {
							document.getElementById('box').value = '1'
							$('.nums').html('x1');
							$('.unitCost').html('￥' + goods_price);
							$('.allCost').html('￥' + goods_price);
						}
					})

				}

				$('.numPop').hide();
				var innhtml = '<div class="pwd-box"><input type="number" maxlength="6" class="pwd-input" id="pwd-input" ><div class="fake-box"><input type="password" unselectable="on" readonly=""><input type="password" unselectable="on" readonly=""><input type="password" unselectable="on" readonly=""> <input type="password" unselectable="on" readonly=""><input type="password" unselectable="on" readonly=""><input type="password" unselectable="on"  readonly=""></div></div>'
				var titlePrice = '<p style="color:#333333;font-weight:blod;"><span class="mui-popup-button" onclick="offBtn()">×</span>请输入支付密码</p>' + '<p class="pay_moeny" style="color:#000000;font-weight:blod;font-size:24px;margin:20px 0;"></p>'
				var quereng='<span class="mui-popup-button mui-popup-button-bold" style="display:none;">确定</span>'
				console.log(titlePrice);
				var this_ = titlePrice;

				mui('body').on('tap', '.payBtn', function() {
					c = document.getElementById('box').value;
					console.log(c)
					$.ajax({
						type: "post",
						url: "http://mall.itcn99.com/i/index/order_sure",
						async: true,
						dataType: 'jsonp',
						data: {
							"uid": b,
							"gid": checked,
							"aid": address_id,
							"good_math": c
						},
						success: function(data) {
							console.log(data)
							var state = data.state;
							var state_oid = data.data.oid;
							console.log(state_oid)
							if(state == 1) {
								var d = document.getElementById('box').value;
								console.log(d);
								$('.numPop').show();
								var prices = goods_price * d;
								if(prices == 0) {
									prices = goods_price
								}
								mui.alert(innhtml, '<p style="color:#333333;font-weight:blod;"><span class="mui-popup-button offBtn" onclick="offBtn()">×</span>请输入支付密码</p>' + '<p class="pay_moeny" style="color:#000000;font-weight:blod;font-size:24px;margin:20px 0;">￥' + prices + '</p>');
								$('.mui-popup-buttons').css('display','none');
								$("#pwd-input").on("input", function() {
									// trim(): 去两边空格的方法；
									var pwd = $(this).val().trim();
									for(var i = 0; i < pwd.length; i++) {
										$(".fake-box input").eq(i).val(pwd[i]);
									}
									$(".fake-box input").each(function() {
										var index = $(this).index();
										if(index >= pwd.length) {
											$(this).val("");
										}
									});
									if(pwd.length == 6) {
										$('.mui-popup-buttons').show();
										if($('.mui-popup').length>1){
											$('.mui-popup').find('.mui-popup-buttons').show();
											$('.mui-popup').eq(0).find('.mui-popup-buttons').hide();
										}
										var pay_pass = $(this).val();
										console.log(pay_pass);
										//执行其他操作 
										$.ajax({
											type: "post",
											url: "http://mall.itcn99.com/i/index/pay",
											async: true,
											dataType: 'jsonp',
											data: {
												"uid": b,
												"oid":state_oid,
												"pay_pass":pay_pass,
											},
											success: function(data) {
												console.log(data)
												var state = data.state;
												if(state == 0){
													mui.confirm("","支付密码错误，请重新输入",function(e){
														if(e.index == 1){
															window.location.href="forget_payment.html";
														}else if(e.index == 0){
															window.location.href="confirm_order.html?id="+checked;
														}
													});
												}
												if(state == 1){
													mui.alert("","支付成功",function(){
															window.location.href="my_order.html";
													});
												}
												if(state == 2){
													mui.alert("","该订单已支付，请勿重复支付",function(){
															$('.mui-popup-buttons').hide();
															window.location.href="confirm_order.html?id="+checked;
													});
												}
												if(state == 3){
													mui.alert("","该订单已改变，请勿支付",function(){
															$('.mui-popup-buttons').hide();
															window.location.href="confirm_order.html?id="+checked;
													});
												}
												if(state == 4){
													mui.alert("","余额不足，请充值",function(){
														$('.mui-popup-buttons').hide();
															window.location.href="confirm_order.html?id="+checked;
														
													});
												}
											}
										});

									}
								});
							}
						}
					});

					//							
				})
			}
		});
		$(".mui-popup-text input").click(function(){
			$(this).blur()
		})
	
	</script>

</html>